<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<style type="text/css">
		     body{
		     	height: 100%;
		     }
			#body{
				display: none;
				position: absolute;
				top: 0px;
				width: 100%;
				height:100%;
				background-color: rgba(0,13,16,0.7);
			}
			.control_box{
				position: relative;
				z-index: 2;
				top: 120px;
				margin: 0px auto;
				background-color:rgb(93,180,8);
				max-width: 400px;
				height: 170px;
				border: 1px solid white;
				display: none;
			}
			.warn{
				color: white;
				font-weight:400;
				font-size:18px;
				text-align: center;
			}
			#no,#ok{
				text-align: center;
				line-height:30px;
				color:rgb(93,180,8);
				background-color: white;
				width: 80px;
				height:30px;
			}
			#ok{
				position: relative;
				left: 50px;
				top: 40px;
				float: left;
				cursor: pointer;
			}
			#no{
				position: relative;
				right: 50px;
				top: 40px;
				cursor: pointer;
				float: right;
			}
		</style>
	</head>
	<body>
		<input type="button" value="确定" class="clickevent"/>
		<div id="body">
		<div id="control_box_1" class="control_box">
			<p class="warn">确&nbsp;定&nbsp;修&nbsp;改&nbsp;?</p>
			<div id="ok" class="clickevent" value="yes">确认</div>
			<div id="no" class="clickevent" value="no">取消</div>
		</div>
		<div id="control_box_2" class="control_box">
			<p class="warn">修&nbsp;改&nbsp;完&nbsp;成&nbsp;</p>
		</div>
		</div>
		<script type="text/javascript">
		    function okOperation(){
					    document.getElementById("control_box_1").style.display = "none";
					    document.getElementById("control_box_2").style.display = "block";
					    setTimeout(function(){
					    	document.getElementById("control_box_2").style.display = "none";
					    	document.getElementById("body").style.display = "none";
					    },700);
					 }
		    
		    function sure(){
					  document.getElementById("body").style.display = "block";
					  document.getElementById("control_box_1").style.display = "block";
					}
		    
		     function noOperation(){
				    	document.getElementById("body").style.display = "none";
				    }
		    function callback(val){
		    	var fn = function(){}
		    	if(val=="确定"){
		    		fn=sure;
		    	}else if(val=="yes"){
		    		fn=okOperation;
		    	}else if(val=="no"){
		    		fn=noOperation;
		    	}
		    	fn();
		    }
		    
		    function callback_second(fn){
		    	fn();
		    }
		    $(".clickevent").on({
		    	click:function(){
		    		var val = $(this).attr("value");
		    		callback(val);
//		            if(val=="确定"){
//		            	callback_second(sure);
//		            }else if(val=="yes"){
//		            	callback_second(okOperation);
//		            }else if(val=="no"){
//		            	callback_second(noOperation);
//		            }
		    	}
		    });
		</script>
	</body>
</html>
